/*
 * 公司信息修改
 * @Author: ljb
 * @Date: 2018-03-27 17:53:27
 * @Last Modified by: ljb
 * @Last Modified time: 2019-03-14 18:04:55
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>


</style>
<template>
	<div class="v-cutomer-company-edit">
		<Form
			ref="formValidate_edit"
			:model="formValidate"
			:rules="ruleValidate"
			:label-width="labelWidth(100, 150)"
			name="create__form">

			<Form-item
				:label="$t('company.name')"
				prop="company_name">
				<i-input
					v-model="formValidate.company_name"
					:placeholder="$t('common.placeholder',{field: $t('company.name')})"
					name="create__name"
					type="text"/>
			</Form-item>

			<Form-item
				:label="$t('company.product_sale')"
				prop="product_price">
				<InputNumber v-model="formValidate.product_price"/>
			</Form-item>

      <!-- 类别 -->
      <Form-item
        :label="$t('product.category')"
        prop="category_id">
        <Row>
          <i-col span="16">
            <Select
              v-model="formValidate.category_id">
              <OptionGroup
                v-for="(item,key) in groupCategories"
                :key="key"
                :label="item.custom_type_name">
                <Option
                  v-for="(value,key) in item.categories"
                  :value="value.id"
                  :key="key">{{ value.name }}</Option>
              </OptionGroup>
            </Select>
          </i-col>
        </Row>
      </Form-item>

			<Form-item
				:label="$t('company.product_img')"
				prop="product_image">
				<Uploader
					ref="product_image"
					:default.sync="thumb_src"
					@on-remove="(file)=>{handleRemove('product_image',file)}"
					@on-change="(file)=>{handleChange('product_image',file)}">
					{{ $t('common.pic_tip') }}
				</Uploader>
			</Form-item>

			<Form-item
				:label="$t('company.product_desc')"
				prop="description">
				<i-input
					v-model="formValidate.description"
					:placeholder="$t('common.placeholder',{field: $t('company.product_desc')})"
					type="text"/>
			</Form-item>

			<Form-item>
				<Button
					type="primary"
					name="edit__update"
					@click="validateData('formValidate_edit')">
					{{ $t('common.update') }}
				</Button>
			</Form-item>

		</Form>
	</div>
</template>

<script>

import labelWidthMixin from 'src/views/mixins/labelWidthMixin';
import { showLocalImage } from 'src/views/mixins/showLocalImage'; // 引入公共的mixins
import { validateUpdateImage } from 'src/validate'; // 引入校验文件

import Uploader from 'src/views/component/Uploader';

export default {

	name: 'CompanyEdit',

	components: {
		Uploader,
	},

	mixins: [showLocalImage, labelWidthMixin],

	props: {
		companyDetail: {
			type: Object,
			default() {
				return {};
			},
		},
		showModal: {
			type: Boolean,
			default() {
				return false;
			},
		},

    groupCategories: {
      type: Array,
      default() {
        return [];
      },
    },
	},

	data() {
		return {
			formValidate: {
				company_name: '', // 公司名称
				product_price: 1, // 产品价格
				description: '', // 产品描述
				product_image: '', // 产品图片
        category_id: null, // 产品分类
			}, // 更新公司信息表单

			ruleValidate: { // 表单验证规则
				company_name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('company.name') }),
						trigger: 'blur,change',
					},
				],
				product_price: [
					{
						required: true,
						type: 'number',
            message: this.$t('validate.required', { field: this.$t('company.product_sale') }),
            min: 0.01,
						trigger: 'blur,change',
					},
				],
				description: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('company.product_desc') }),
						trigger: 'blur,change',
					},
				],
				product_image: [
					{
						required: true,
						validator: validateUpdateImage,
						trigger: 'blur,change',
					},
				],
        category_id:[
          {
            required: true,
            type: 'number',
            min: 1,
            message: this.$t('validate.required', { field: this.$t('product.category') }),
            trigger: 'blur,change',
          },
        ],
			},

			// 上传的图片地址
			thumb_src: '',
		};
	},
	created() {
		this.initFormData();
	},

	methods: {
		/**
		 *  初始化表单
		 * 	@return {undefined}
		 */
		initFormData() {
			if (Object.keys(this.companyDetail).length > 0) {
				this.formValidate.company_name = this.companyDetail.company_name;

				this.formValidate.product_price = this.companyDetail.product_price ? Number(this.companyDetail.product_price) : 1;

				this.formValidate.description = this.companyDetail.description;

				this.formValidate.product_image = this.companyDetail.product_image;

				this.formValidate.category_id = this.companyDetail.category_id;

				this.thumb_src = this.companyDetail.product_image;
			}
		},

		/**
		 * 删除图片
		 * @param {String} filed {icon}
		 * @return {undefined}
		 */
		handleRemove(field) {
			this.formValidate[field] = null;
			// this.$refs.formValidate.validateField(field);
		},

		/**
		 * 选择图片
		 * @param {Object} file {选择的文件对象集合}
		 * @param {String} field {icon}
		 * @return {undefined}
		 */
		handleChange(field, { file }) {
			this.formValidate[field] = file;
			// this.$refs.formValidate.validateField(field);
		},

		/**
         * 校验数据
         * @return {undefined}
         */
		validateData(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.$emit('update', this.companyDetail.id, this.formDataCreate());
				} else {
					this.$Message.error(this.$('common.invalid_form_data'));
				}
			});
		},

		/**
         * 手动拼接formdata数据
         * @return {Object}
         */
		formDataCreate() {
			const new_object = {
				_method: 'PUT',

				company_name: this.formValidate.company_name,

				product_price: this.formValidate.product_price,

				description: this.formValidate.description,

				product_image: this.formValidate.product_image,

				category_id: this.formValidate.category_id,
			};

			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				if (typeof new_object[key] !== 'undefined' && new_object[key]) {
					form_data.append(key, new_object[key]);
				}
			});

			return form_data;
		},

	},
};
</script>
